<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<meta charset="utf-8">
	<style type="text/css">
 	div{
 		width:100%;
		margin:100px auto;
		text-align: center;
	} 

	img{
		border-radius: 10px;
	}
	#img1{
		width:420px;
		height: 250px;
	}
	.img_left,.img_right{
		margin-top: 50px;
	}
	.img_left{
		margin-right: 10px;
	}
	.img_right{
		margin-left: 10px;
	}
	</style>
</head>
<body>

<div class="clearfix" onmouseover="stopImg()" onmouseout="startImg()">
<img src="imgs/left.png" class="img_left" onclick="last() " />
<img src="imgs/img1.jpg" id="img1" />
<img src="imgs/right.png" class="img_right" onclick="next()" />
</div>

<script type="text/javascript">
var imgsList="imgs/img1.jpg,imgs/img2.jpg,imgs/img3.jpg,imgs/img4.jpg,imgs/img5.jpg".split(",");
var index=0;

var time=setInterval(next,1000);//每隔2秒变一次

function last(){//向前
	if(index==0){
		index=imgsList.length;
	}
	var img=document.getElementById("img1");
	img.src=imgsList[--index];
}

function next(){//向后
	if(index==imgsList.length-1){
		index=-1;
	}
	var img=document.getElementById("img1");
	img.src=imgsList[++index];
}


function stopImg(){//鼠标悬浮停止
	clearInterval(time);
}

function startImg(){//鼠标移出继续动
	time=setInterval(next,1000);
}
</script>

</body>
</html>